<template>
    <div class="component-table">
        <n-scrollbar class="component-table" style="max-height: 100%">
            <n-collapse :default-expanded-names="defaultExpandedNames">
                <n-collapse-item :title="index.type" :name="index.type" v-for="index in elements.allElementList">
                    <div class="component-table-main">
                        <div v-for="indexChildren in index.children" v-show="indexChildren.isShow">
                            <div
                                @click="elements.addElements(elements.getElementTemplate(indexChildren.name))"
                                class="vue-flow-model pointer"
                            >
                                <n-icon size="30" color="#18A058">
                                    <flow-icon :icon-v-node="indexChildren.icon"/>
                                </n-icon>
                            </div>
                            <span>{{ indexChildren.title }}</span>
                        </div>
                    </div>
                </n-collapse-item>
            </n-collapse>
        </n-scrollbar>
    </div>
</template>

<script setup>

import {useElementsStore} from "@/stores/elements";
import FlowIcon from "@/components/VueFlowModel/vueFlowTable/FlowIcon.vue";

const elements = useElementsStore()
// 节点模板

const defaultExpandedNames = computed(()=>{
    let array = []
    for (let i of elements.allElementList) {
        array.push(i.type)
    }
    return array
})

</script>

<style scoped lang="less">
.component-table-main {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    padding: 0;

    > div {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 20px 10px;
    }
}
.n-collapse{
    position: relative;
    top: 20px;
}
</style>